<template>
  <div class="about-container">
    <el-row :gutter="16">
      <el-col :span="24" :sm="24" :lg="12">
        <el-card :body-style="{ padding: '16px' }">
          <div slot="header">
            <span>
              <i class="fa fa-thumbs-o-up"></i> 系统介绍
            </span>
          </div>
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <el-tag type="success" effect="dark">后端技术</el-tag>
              </template>
              <div>- .Net Core 3.1 API</div>
              <div>- Swagger 前后端文档说明，Post读操作，Put写操作</div>
              <div>- MiniProfiler 接口性能可视化分析</div>
              <div>- CORS 简单跨域解决方案</div>
              <div>- Autofac 轻量级IoC 代替Core内置容器实现DI</div>
              <div>- AOP 技术实现缓存切面</div>
              <div>- NLog 日志文件记录</div>
              <div>- JWT 登录权限验证</div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <el-tag effect="dark">数据库技术</el-tag>
              </template>
              <div>- EF Core 2.2 + Dapper 混合模式</div>
              <div>- SqlServer、Oracle、MySql 多数据库支持（目前只支持SqlServer、Oracle）</div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <template slot="title">
                <el-tag type="danger" effect="dark">分布式缓存技术</el-tag>
              </template>
              <div>- Redis 轻量级分布式缓存</div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <template slot="title">
                <el-tag type="warning" effect="dark">前端技术</el-tag>
              </template>
              <div>- vue-cli 4.0 脚手架搭建</div>
              <div>- ElementUI 基于Vue 2.0的组件库</div>
              <div>- axios 异步请求</div>
              <div>- vxe-table 表格依赖</div>
              <div>- v-charts 报表依赖</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :span="24" :sm="24" :lg="12">
        <el-card :body-style="{ padding: '16px' }">
          <div slot="header">
            <span>
              <i class="fa fa-hand-o-right"></i> 操作风格
            </span>
          </div>
          <el-collapse v-model="activeNames">
            <el-collapse-item name="5">
              <template slot="title">
                <el-tag type="success" effect="dark">表格操作</el-tag>
              </template>
              <div>- vxe-table 表格依赖</div>
              <div>
                - 删除、编辑等针对数据行的操作基于
                <el-tag>快捷菜单（右键呼出）</el-tag>实现
              </div>
              <div>
                - 新增、多条件查询等不针对数据行的操作基于
                <el-tag>工具栏按钮</el-tag>实现
              </div>
              <div>
                - 模块主界面数据表格
                <el-tag>高度自适应</el-tag>、
                <el-tag>列可拖动</el-tag>
              </div>
            </el-collapse-item>
            <el-collapse-item name="6">
              <template slot="title">
                <el-tag type="danger" effect="dark">用户操作</el-tag>
              </template>
              <div>
                - 登录用户在
                <el-tag>个人设置</el-tag>中修改头像、基本信息 及 密码
              </div>
              <div>
                -
                <el-tag>清空缓存</el-tag>操作可及时清理服务器端Redis缓存数据
              </div>
              <div>
                -
                <el-tag>退出登录</el-tag>清空浏览器缓存 并 返回登录界面
              </div>
              <div>
                - 涉及到登录用户信息的修改，如基本资料、架构、权限上的更改，需
                <el-tag>重新登录重置浏览器缓存</el-tag>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :span="24" :sm="24" :lg="12">
        <el-card :body-style="{ padding: '16px' }">
          <div slot="header">
            <span>
              <i class="fa fa-hand-spock-o"></i> 模块介绍
            </span>
          </div>
          <el-collapse v-model="activeNames">
            <el-collapse-item>
              <template slot="title">
                <span>
                  数据字典
                  <el-tag>树型</el-tag>
                </span>
              </template>
              <div>- 记录系统字典数据，用于 列表格式化显示、下拉框数据源等</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  系统功能
                  <el-tag>树型</el-tag>
                </span>
              </template>
              <div>- 维护系统功能菜单，配置功能按钮</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  系统日志
                  <el-tag type="success">常规</el-tag>
                </span>
              </template>
              <div>- 查看接口日志记录，包括操作记录与异常记录</div>
              <div>- 所有关于Api的调度记录在此功能中均可查询</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>调度监测</span>
              </template>
              <div>- 基于系统日志的接口调度监测</div>
              <div>- 实时、本周、本月、本年的接口调度报表</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  行政区域
                  <el-tag>树型</el-tag>
                </span>
              </template>
              <div>- 全国行政地区查询</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  数据表管理
                </span>
              </template>
              <div>- 当前连接数据库所有数据表查询</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  组织管理
                  <el-tag>树型</el-tag>&nbsp;
                  <el-tag>顶级架构</el-tag>
                </span>
              </template>
              <div>- 组织架构最高层级管理</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  部门管理
                  <el-tag>树型</el-tag>&nbsp;
                  <el-tag>二级架构</el-tag>&nbsp;
                  <el-tag>深度查询</el-tag>
                </span>
              </template>
              <div>- 基于组织的部门模块管理</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  岗位管理
                  <el-tag>树型</el-tag>&nbsp;
                  <el-tag>三级架构</el-tag>&nbsp;
                  <el-tag>深度查询</el-tag>
                </span>
              </template>
              <div>- 基于组织、部门的岗位模块管理</div>
              <div>- 分配用户</div>
              <div>- 分配岗位权限</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  角色管理
                  <el-tag type="success">常规</el-tag>&nbsp;
                  <el-tag>二级架构</el-tag>&nbsp;
                  <el-tag>深度查询</el-tag>
                </span>
              </template>
              <div>- 基于组织的角色模块管理</div>
              <div>- 分配用户</div>
              <div>- 分配角色权限</div>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span>
                  用户管理
                  <el-tag type="success">常规</el-tag>&nbsp;
                  <el-tag>三级架构</el-tag>&nbsp;
                  <el-tag>深度查询</el-tag>
                </span>
              </template>
              <div>- 基于组织（部门）的用户模块管理</div>
              <div>- 分配用户权限</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeNames: ["1", "2", "3", "4", "5", "6"],
    };
  }
};
</script>

<style lang="less" scoped>
.about-container {
  padding: 16px;
  //   background-color: #f8f8f8;
  position: relative;
}
</style>

